<template>
  <div>
    <!-- 登录 -->
    <!-- 登录页面 -->

    <div class="top">
      <img src="../../assets/mipmap-xhdpi/home_icon_ent_people.png" alt="" />
      <div class="span">欢迎登录油气管道</div>
    </div>

    <!-- Form 表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="账号"
        placeholder="请输入您的账号"
        :rules="[{ required: true, message: '请填写账号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入您的密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <div style="margin: 16px">
        <van-button round block type="danger" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>
  
  <script>
// 用请求，先引用请求
// 引入vant Notify 消息提示
import { Notify, Dialog } from "vant";
import { userLogin } from "@/api/login";

// 然后在页面中 引入
import sha1 from "@/utils/shaa"; //密码加密
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      let params = {
        obj: {
          username: values.username,
          password: sha1(values.password),
        },
      };
      userLogin(params).then((res) => {
        if (res.data._rd === true) {
          Dialog.alert({
            title: "登录",
            message: "登录成功啦",
          }).then(() => {
            localStorage.setItem("authToken", res.data.result.authToken),
              localStorage.setItem("userId", res.data.result.userId);
            this.$router.push("/");
          });
        } else {
          //   Notify({ type: "danger", message: "登录失败" });
          Toast.fail("登录失败");
        }
      });
    },
  },
};
</script>
  
  
  <style scoped>
.top {
  width: 100%;
  font-size: 0.16rem;
  height: 1.5rem;
  color: black;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top .span {
  font-size: 0.19rem;
  margin-top: 0.2rem;
}
.van-cell {
  border: 1px solid red;
  width: 95%;
  margin: 0.05rem 0 0 0.09rem;
}
.top img {
  width: 0.6rem;
  /* margin: 0.5rem 0.1rem 1rem; */
}
.tips {
  margin-top: 0.2rem;
  padding: 0 0.16rem;
}
.tips a {
  font-size: 0.16rem;
  color: #000;
}
.van-button {
  height: 0.33 rem;
  margin-top: 0.5rem;
}

.van-button__text {
  font-size: 0.2rem;
}
</style>